<template>
  <div class="container">
    <div class="card-container">
      <a-tabs style="margin-bottom:0;" @change="tabsChange" v-model="tabsKey" type="card" :tabBarStyle="{'marginBottom':0,'marginTop':'20px'}">
        <a-tab-pane :key="0" tab="总表" style="background-color: #f0f2f5;padding: 20px 0 0 0;">
          <div>
            <a-row type="flex"  >
              <a-col :xxl="4" :xl="4" :md="12" :sm="24" :xs="24" style="padding: 10px;">
                <a-select v-model="chartTimeSelect" style="width: 100%" @change="selectChange">
                  <a-select-option :value="1">当日</a-select-option>
                  <a-select-option :value="2">昨日</a-select-option>
                  <a-select-option :value="3">过去一周</a-select-option>
                  <a-select-option :value="4">过去30天</a-select-option>
                  <a-select-option :value="5">本月</a-select-option>
                  <a-select-option :value="6">本季度</a-select-option>
                  <a-select-option :value="7">自定义</a-select-option>
                </a-select>
              </a-col>
              <a-col :xxl="4" :xl="5" :md="12" :sm="24" :xs="24" v-if="chartTimeSelect == 7" style="padding: 10px;">
                <a-range-picker
                  :allowClear="false"
                  :ranges="{ '昨天': [moment().add(-1, 'days'), moment().add(-1, 'days')], '过去7天': [moment().add(-7, 'days'), moment().add(-1, 'days')], 
                            '过去30天': [moment().add(-30, 'days'), moment().add(-1, 'days')] }"
                  :defaultValue="[moment().add(-1, 'days'), moment().add(-1, 'days')]"
                  :disabled-date="disabledDate" @change="formDateChange" 
                  v-if="chartTimeSelect == 7" style="width: 100%;"
                />
              </a-col>
              <a-col :xxl="4" :xl="4" :md="12" :sm="24" :xs="24" style="padding: 10px;">
                <a-select v-model="superid" style="width: 100%;" @change="getTotalData">
                  <a-select-option :value="0">全部账户</a-select-option>
                  <a-select-option :value="item.id" v-for="(item,index) in userData" :key="index">{{item.account}}</a-select-option>
                </a-select>
              </a-col>
              <a-col :xxl="4" :xl="4" :md="12" :sm="24" :xs="24" style="padding: 10px;">
                <a-select v-model="youhuashiId" style="width:100%;" @change="selectYouhuashi" :disabled="isoptimizer == 1">
                  <a-select-option :value="0">全部优化师</a-select-option>
                  <a-select-option :value="item.id" v-for="(item,index) in youhuashi" :key="index" >
                    {{item.username}}
                  </a-select-option>
                </a-select>
              </a-col>
            </a-row>
          </div>
          <div class="totalContainer" style="padding: 0 10px;">
            <a-row type="flex" justify="space-between" >
              <a-col :xxl="5" :xl="7" :md="11" :sm="24" :xs="24" class="total-col total-item">
                <div class="title">展现</div>
                <div class="p">
                  <countTo :startVal='0' :endVal='parseFloat((totalList.impression || 0))' :duration='800' :decimals="0"></countTo>
                </div>
              </a-col>
              <a-col :xxl="6" :xl="8" :md="11" :sm="24" :xs="24" class="total-col total-item">
                <div class="title">点击</div>
                <div class="p">
                  <countTo :startVal='0' :endVal='parseFloat((totalList.click || 0))' :duration='800' :decimals="0"></countTo>
                </div>
              </a-col> 
              <a-col :xxl="6" :xl="8" :md="11" :sm="24" :xs="24" class="total-col total-item" style="padding:0;background-color: transparent;">
                <a-row type="flex" justify="space-between" style="height:100%;">
                  <a-col :span="11" class="total-col total-item" style="margin-top:0;">
                    <div class="title">总消费</div>
                    <div class="p" style="height: 100%;">
                      <countTo :startVal='0' :endVal='parseFloat((totalList.cost || 0))' :duration='800' :decimals="2"></countTo>
                    </div>
                  </a-col>
                  <a-col :span="11" class="total-col total-item" style="margin-top:0;" offset="2">
                    <div class="title">直播间消费</div>
                    <div class="p" style="height: 100%;">
                      <countTo :startVal='0' :endVal='parseFloat((totalList.liveCost || 0))' :duration='800' :decimals="2"></countTo>
                    </div>
                  </a-col>
                </a-row>
              </a-col>
              <a-col :xxl="5" :xl="7" :md="11" :sm="24" :xs="24" class="total-col total-item">
                <div class="title">点击率</div>
                <div class="p">
                  <countTo :startVal='0' :endVal='parseFloat((totalList.ctr*100 || 0))' :duration='800' :decimals="2"></countTo>
                  %
                </div>
              </a-col>
              <a-col :xxl="5" :xl="8" :md="11" :sm="24" :xs="24" class="total-col total-item">
                <div class="title">平均点击价格</div>
                <div class="p">
                  <countTo :startVal='0' :endVal='parseFloat((totalList.cpc || 0))' :duration='800' :decimals="2"></countTo>
                </div>
              </a-col>
              <a-col :xxl="6" :xl="8" :md="11" :sm="24" :xs="24" class="total-col total-item" style="padding:0;background-color: transparent;">
                <a-row type="flex" justify="space-between" style="height:100%;">
                  <a-col :span="11" class="total-col total-item" style="margin-top:0;">
                    <div class="title">基木鱼支付成功量</div>
                    <div class="p" style="height: 100%;">
                      <countTo :startVal='0' :endVal='parseFloat((totalList.ctProductPaySuccess || 0))' :duration='800' :decimals="0"></countTo>
                    </div>
                  </a-col>
                  <a-col :span="11" class="total-col total-item" style="margin-top:0;" offset="2">
                    <div class="title">直播间成单量</div>
                    <div class="p" style="height: 100%;">
                      <countTo :startVal='0' :endVal='parseFloat((totalList.liveOrderData.liveOrderConversions || 0))' :duration='800' :decimals="0"></countTo>
                    </div>
                  </a-col>
                </a-row>
              </a-col>
              <a-col :xxl="6" :xl="11" :md="11" :sm="24" :xs="24" class="total-col total-item" style="padding:0;background-color: transparent;">
                <a-row type="flex" justify="space-between" style="height:100%;">
                  <a-col :span="11" class="total-col total-item" style="margin-top:0;">
                    <div class="title">基木鱼客单价</div>
                    <div class="p" style="height: 100%;">
                      <countTo :startVal='0' :endVal='parseFloat((totalList.pct || 0))' :duration='800' :decimals="2"></countTo>
                    </div>
                  </a-col>
                  <a-col :span="11" class="total-col total-item" style="margin-top:0;" offset="2">
                    <div class="title">直播间客单价</div>
                    <div class="p" style="height: 100%;">
                      <countTo :startVal='0' :endVal='parseFloat((totalList.livepct || 0))' :duration='800' :decimals="2"></countTo>
                    </div>
                  </a-col>
                </a-row>
              </a-col>
              <a-col :xxl="5" :xl="12" :md="11" :sm="24" :xs="24" class="total-col total-item" style="padding:0;background-color: transparent;">
                <a-row type="flex" justify="space-between" style="height:100%;">
                  <a-col :span="11" class="total-col total-item" style="margin-top:0;">
                    <div class="title">平均每单成本</div>
                    <div class="p" style="height: 100%;">
                      <countTo :startVal='0' :endVal='parseFloat((totalList.act || 0))' :duration='800' :decimals="2"></countTo>
                    </div>
                  </a-col>
                  <a-col :span="11" class="total-col total-item" style="margin-top:0;" offset="2">
                    <div class="title">平均直播间成本</div>
                    <div class="p" style="height: 100%;">
                      <countTo :startVal='0' :endVal='parseFloat((totalList.liveact || 0))' :duration='800' :decimals="2"></countTo>
                    </div>
                  </a-col>
                </a-row>
              </a-col>
            </a-row>
            <div style="background-color:#ffffff;padding:20px;margin-top:20px;">
              <standard-table
                rowKey="id"
                :loading='loading'
                :columns="columns"
                :dataSource="dataSource"
                :expandedRowKeys='expandedRowKeys'
                :pagination="{showTotal:total => `共 ${total} 条数据`, showLessItems: true}"
                @clear="onClear"
                @change="onChange"
                @onExpand="onExpand"
                :scroll="{x:1200}"
              >
                <div slot="ctr" slot-scope="{record}">
                  {{(record.ctr*100).toFixed(2) + '%'}}
                </div>
                <div slot="cost" slot-scope="{record}">
                  {{(record.cost).toFixed(2)}}
                </div>
                <div slot="productPayCost" slot-scope="{record}">
                  {{(record.productPayCost).toFixed(2)}}
                </div>
                <div slot="liveOrderConversionsCost" slot-scope="{record}">
                  {{(record.liveOrderConversionsCost).toFixed(2)}}
                </div>
              </standard-table>
            </div>
          </div>
        </a-tab-pane>
        <a-tab-pane :key="1" tab="日报表" v-if="false">
          <a-card class="card" title="数据列表（日增长量）">
            <standard-table
              rowKey="id"
              :loading='loading'
              :columns="columns"
              :dataSource="dataSource"
              :expandedRowKeys='expandedRowKeys'
              :pagination="{showTotal:total => `共 ${total} 条数据`}"
              @clear="onClear"
              @change="onChange"
              @onExpand="onExpand"
            >
              <div slot="ctr" slot-scope="{record}">
                {{(record.ctr*100).toFixed(2) + '%'}}
              </div>
              <div slot="cost" slot-scope="{record}">
                {{(record.cost).toFixed(2)}}
              </div>
            </standard-table>
          </a-card>  
        </a-tab-pane>
        <a-tab-pane :key="2" tab="小时报表">
          <a-card class="card" title="数据图表（小时增长量）" v-show="false">
            <div class="area">
              <a-select v-model="chartSelect" style="width: 180px" @change="createChart">
                <a-select-option value="impression">展现</a-select-option>
                <a-select-option value="click">点击</a-select-option>
                <a-select-option value="cost">消费</a-select-option>
                <a-select-option value="ctr">点击率</a-select-option>
                <a-select-option value="ctProductPaySuccess">商品支付成功量</a-select-option>
                <a-select-option value="ctLiveOrderConversions">直播间成单量</a-select-option>
              </a-select>
              <a-form-model style="flex:1;height:40px;margin-left:10px;" :label-col="{ span: 2 }" :wrapper-col="{ span: 14 }" >
                <a-form-model-item label="自动播放">
                  <a-switch checked-children="开" un-checked-children="关" v-model="chartAutoPlay" />
                  <a-icon style="margin-left:10px;" type="sync" :spin="spin" @click="refresh" />
                </a-form-model-item>
              </a-form-model>
            </div>
            <div id="chart-main" style="height:500px"></div>
            <a-slider :marks="marks" :step="null" v-model="marksValue" :disabled="chartAutoPlay" @change="sliderChange"/>
          </a-card>
          <a-card class="card" title="数据图表（小时增长量）" v-show="true">
            <chartLine ref="chartLineRef" :hourData='hourData' />
          </a-card>
          <a-card class="card" title="数据列表（小时增长量）">
            <a-input-search style="width:300px;margin-bottom:20px;" placeholder="输入账户名" enter-button="搜索" @search="onSearch" allowClear/>
            
            <standard-table
              rowKey="id"
              :loading='loading2'
              :columns="columns2"
              :dataSource="dataSource2"
              :expandedRowKeys='expandedRowKeys2'
              :pagination="{showTotal:total => `共 ${total} 条数据`,showSizeChanger:true,pageSizeOptions:['10', '20', '30', '40', '50', '100'],showLessItems:true,}"
              @clear="onClear2"
              @change="onChange2"
              @onExpand="onExpand2"
              :scroll="{x:1200}"
            >
              <div slot="impression" slot-scope="{record}">
                {{record.impression}} 
                <span :class="record.huanbi.impression>0?'fontGreen':'fontRed'">{{record.huanbi.impression + '%'}}</span>
              </div>
              <div slot="click" slot-scope="{record}">
                {{record.click}} 
                <span :class="record.huanbi.click>0?'fontGreen':'fontRed'">{{record.huanbi.click + '%'}}</span>
              </div>
              <div slot="ctr" slot-scope="{record}">
                {{(record.ctr*100).toFixed(2) + '%'}}
                <span :class="record.huanbi.ctr>0?'fontGreen':'fontRed'">{{record.huanbi.ctr + '%'}}</span>
              </div>
              <div slot="cost" slot-scope="{record}">
                {{(record.cost).toFixed(2)}}
                <span :class="record.huanbi.cost>0?'fontGreen':'fontRed'">{{record.huanbi.cost + '%'}}</span>
              </div>
              <div slot="ctProductPaySuccess" slot-scope="{record}">
                {{record.ctProductPaySuccess}} 
                <span :class="record.huanbi.ctProductPaySuccess>0?'fontGreen':'fontRed'">{{record.huanbi.ctProductPaySuccess + '%'}}</span>
              </div>
              <div slot="ctLiveOrderConversions" slot-scope="{record}">
                {{record.ctLiveOrderConversions}} 
                <span :class="record.huanbi.ctLiveOrderConversions>0?'fontGreen':'fontRed'">{{record.huanbi.ctLiveOrderConversions + '%'}}</span>
              </div>
            </standard-table>
          </a-card> 
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import StandardTable from '@/components/table/StandardTable'
import {getAccountReportByDate,getAccountReportByHour,getAccountSummary} from '@/api/shuju/shuju'
import chartLine from './components/chartLine'
import countTo from 'vue-count-to';
import {getBdAccountList, getOptimizerList} from '@/api/xinxiliu/account'
import moment from 'moment'
// import moment from 'moment'

const columns = [
  // {
  //   title: '推广计划',
  //   width: 600,
  //   dataIndex: 'campaignNameStatus',
  // },
  {
    title: '账户',
    width: 150,
    dataIndex: 'userName',
    // fixed: 'left'
  },
  {
    title: '展现',
    width: 100,
    dataIndex: 'impression',
    sortDirections:['descend','ascend'],
    sorter: () => {},
  },
  {
    title: '点击',
    width: 100,
    dataIndex: 'click',
    sortDirections:['descend','ascend'],
    sorter: () => {},
  },
  {
    title: '消费',
    width: 100,
    dataIndex: 'cost',
    defaultSortOrder: 'descend',
    scopedSlots: { customRender: 'cost' },
    sortDirections:['descend','ascend'],
    sorter: () => {},
  },
  {
    title: '点击率',
    width: 100,
    dataIndex: 'ctr',
    scopedSlots: { customRender: 'ctr' },
    sortDirections:['descend','ascend'],
    sorter: () => {},
  },
  {
    title: '基木鱼成单量',
    width: 150,
    dataIndex: 'ctProductPaySuccess',
    sortDirections:['descend','ascend'],
    sorter: () => {},
  },
  {
    title:'平均基木鱼成单成本',
    width: 180,
    dataIndex: 'productPayCost',
    scopedSlots: { customRender: 'productPayCost' },
  },
  {
    title:'基木鱼GMV',
    width: 150,
    dataIndex: 'ctProductPaySuccessAmount',
    scopedSlots: { customRender: 'ctProductPaySuccessAmount' },
  },
  {
    title: '直播间成单量',
    width: 180,
    dataIndex: 'ctLiveOrderConversions',
    scopedSlots: { customRender: 'ctLiveOrderConversions' },
    sortDirections:['descend','ascend'],
    sorter: () => {},
  },
  {
    title:'平均直播成单成本',
    width: 150,
    dataIndex: 'liveOrderConversionsCost',
    scopedSlots: { customRender: 'liveOrderConversionsCost' },
  },
  {
    title:'直播GMV',
    width: 150,
    dataIndex: 'liveOrderAmountConversions',
    scopedSlots: { customRender: 'liveOrderAmountConversions' },
  },
]

const columns2 = [
  {
    title: '时间',
    width: 200,
    dataIndex: 'date',
  },
  {
    title: '账户',
    width: 200,
    dataIndex: 'userName'
  },
  {
    title: '展现',
    width: 200,
    dataIndex: 'impression',
    scopedSlots: { customRender: 'impression' },
    sortDirections:['descend','ascend'],
    sorter: () => {},
  },
  {
    title: '点击',
    width: 200,
    dataIndex: 'click',
    scopedSlots: { customRender: 'click' },
    sortDirections:['descend','ascend'],
    sorter: () => {},
  },
  {
    title: '消费',
    width: 200,
    dataIndex: 'cost',
    defaultSortOrder: 'descend',
    scopedSlots: { customRender: 'cost' },
    sortDirections:['descend','ascend'],
    sorter: () => {},
  },
  {
    title: '点击率',
    width: 200,
    dataIndex: 'ctr',
    scopedSlots: { customRender: 'ctr' },
    sortDirections:['descend','ascend'],
    sorter: () => {},
  },
  {
    title: '商品支付成功量',
    width: 200,
    dataIndex: 'ctProductPaySuccess',
    scopedSlots: { customRender: 'ctProductPaySuccess' },
    sortDirections:['descend','ascend'],
    sorter: () => {},
  },
  {
    title: '直播间成单量',
    width: 200,
    dataIndex: 'ctLiveOrderConversions',
    scopedSlots: { customRender: 'ctLiveOrderConversions' },
    sortDirections:['descend','ascend'],
    sorter: () => {},
  },
]

export default {
  data() {
    return {
      moment,
      tabsKey:0,
      superid:0,

      userData:[],

      chartTimeSelect:1,
      totalList:{
        ctr:0,
        act:0,
        pct:0,
        ctLiveOrderConversions: 0,
        ctProductPaySuccess:0,
        click: 0,
        cost: 0,
        cpc: 0,
        impression: 0,
        liveact:0, 
        liveCost:0,
        livepct:0,
        liveOrderData: {
          cost: 0,
          liveOrderAmountConversions: 0,
          liveOrderConversions: 0,
        }
      },

      columns:columns,
      loading:false,
      expandedRowKeys:[],
      changeKey:'cost',
      changeOrder:'DESC',
      dataSource:[],

      columns2:columns2,
      loading2:false,
      expandedRowKeys2:[],
      changeKey2:'cost',
      changeOrder2:'DESC',
      dataSource2:[],
      dataSource2Total:[],
      keyWord:'',

      hourData:[],
      chartSelect:'cost',
      myChart:null,
      chartIndex:0,
      hourArr:[],
      chartAutoPlay:true,
      chartAutoPlayTimeOut: 3000,
      marks:{},
      marksList:[],
      marksValue:0,
      chartTimeoutFunc:null,
      spin:false,
      youhuashiId:0,
      youhuashi:[], // 优化师列表

      page:1,
      page2:1,

      form:{
        start_date: moment().add(-1, 'days').format("YYYY-MM-DD"),
        end_date: moment().add(-1, 'days').format("YYYY-MM-DD"),
      },
    }
  },
  created(){
    this.init()
  },
  mounted(){
    
  },
  methods:{
    init(){
      if(this.tabsKey === 0){
        this.getTotalData()
        // this.getRiData()
        this.getUserData()
        this.getOptimizerList()
      }else if(this.tabsKey == 1){
        this.getRiData()
      }else if(this.tabsKey == 2){
        this.getXiaoshiData()
        this.getChartData()
      }
    },
    getUserData(){
      getBdAccountList({}).then((res) => {
        if(res.errcode == 0){
          let arr = []
          for(let i of res.data){
            if(i.pid == 0){
              arr.push(i)
            }
          }
          this.userData = arr
        }
      });
    },
    getTotalData(){
      let params = {
        type:this.chartTimeSelect,
        superid:this.superid,
      }
      if(this.chartTimeSelect == 7){
        Object.assign(params, this.form)
      }
      if(this.youhuashiId != 0){
        params.optid = this.youhuashiId
      }
      this.getRiData()
      getAccountSummary(params).then((res) => {
        this.totalList = res.data
      });
    },
    getOptimizerList(){
      // 获取优化师列表
      getOptimizerList({}).then((res) => {
        console.log(res)
        if(res.errcode == 0){
          this.youhuashi = res.data
        }
      });
    },
    getRiData(){
      const _this = this;
      this.loading = true;
      let params = {
        column:this.changeKey,
        sortrule:this.changeOrder,
        type:this.chartTimeSelect,
        superid:this.superid,
      }
      if(this.chartTimeSelect == 7){
        Object.assign(params, this.form)
      }
      if(this.youhuashiId != 0){
        params.optid = this.youhuashiId
      }
      getAccountReportByDate(params).then((res) => {
        _this.loading = false;
        if(res.errcode == 0){
          let idx = 1
          for(let item of res.data){
            item.id = idx
            idx++
          }
          _this.dataSource = res.data
        }
      }).catch(()=>{
        _this.loading = false;
      });
    },
    getXiaoshiData(){
      const _this = this;
      this.loading2 = true;
      let params = {
        column:this.changeKey2,
        sortrule:this.changeOrder2
      }
      getAccountReportByHour(params).then((res) => {
        _this.loading2 = false;
        if(res.errcode == 0){
          let idx = 1
          for(let item of res.data){
            item.id = idx
            let huanbi = {
              act: this.getHuanbi(item,'act'),
              click: this.getHuanbi(item,'click'),
              cost: this.getHuanbi(item,'cost'),
              cpc: this.getHuanbi(item,'cpc'),
              ctLiveOrderConversions: this.getHuanbi(item,'ctLiveOrderConversions'),
              ctProductPaySuccess: this.getHuanbi(item,'ctProductPaySuccess'),
              ctProductPaySuccessAmount: this.getHuanbi(item,'ctProductPaySuccessAmount'),
              ctProductPaySuccessAmountROI: this.getHuanbi(item,'ctProductPaySuccessAmountROI'),
              ctr: this.getHuanbi(item,'ctr'),
              impression: this.getHuanbi(item,'impression'),
              pct: this.getHuanbi(item,'pct'),
            }
            item.huanbi = huanbi
            idx++
          }
          _this.dataSource2 = res.data
          _this.dataSource2Total = res.data
          if(_this.keyWord != ''){
            _this.onSearch(_this.keyWord)
          }
        }
      });
    },
    getChartData(){
      if(this.$refs.chartLineRef){
        this.$refs.chartLineRef.init()
      }
      getAccountReportByHour({}).then((res) => {
        if(res.errcode == 0){
          this.hourData = res.data
          setTimeout(() => {
            this.$refs.chartLineRef.setHourData()
          }, 0);
          // this.createChart()
        }
      });
    },
    createChart(){
      let data = JSON.parse(JSON.stringify(this.hourData)) 
      if(this.chartTimeoutFunc){
        clearTimeout(this.chartTimeoutFunc)
      }
      this.chartIndex = 0
      this.marksValue = 0
      // 循环data，设置hour，并取出userName和hour
      let hourArr = [] // 包含hour、userName数组及seriesData数组
      for(let item of data){
        item.ctr = (item.ctr*100).toFixed(2)
        item.cost = new Number(item.cost).valueOf().toFixed(2)
        // let hour = moment(item.date).format('H')
        let hour = item.hour
        // item.hour = hour
        // 判断字符串转数组
        let seriesDataChild = typeof item[this.chartSelect] == 'number'?item[this.chartSelect]:new Number(item[this.chartSelect]).valueOf()
        if(!hourArr.find(e=>e.hour == hour)){
          hourArr.push({
            hour,
            userNameArr: [item.userName],
            seriesData: [seriesDataChild]
          })
        }else{
          let f = hourArr.find(e=>e.hour == hour)
          f.userNameArr.push(item.userName)
          f.seriesData.push(seriesDataChild)
        }
      }
      // 按时间顺序排序
      hourArr.sort((a,b)=>a.hour - b.hour)
      console.log('hour',hourArr)
      this.hourArr = hourArr
      let yAxisData = hourArr[this.chartIndex].userNameArr
      let seriesData = hourArr[this.chartIndex].seriesData
      //设置marks
      let marks = {}
      let marksList = []
      let len = 1
      for(let item of hourArr){
        if(item.seriesData.length < 9){
          len++
          continue
        }
        if(marksList.length > 0){
          let location = Math.ceil(marksList.length*100/(hourArr.length-len))
          // console.log('location',location,item.hour)
          marks[location] = item.hour + '时'
          marksList.push({
            value:location,
            index:marksList.length
          })
        }else{
          marks[0] = item.hour + '时'
          marksList.push({ 
            value:0,
            index:0
          })
        }
      }
      // console.log(marks,marksList)
      this.marks = marks
      this.marksList = marksList

      this.myChart = echarts.init(document.getElementById('chart-main'));
      const options = {
        xAxis: {
          max: 'dataMax'
        },
        yAxis: {
          type: 'category',
          data: yAxisData,
          inverse: true,
          animationDuration: 300,
          animationDurationUpdate: 300,
          max: 4 //y轴数据大于10个时展示10个（0-9),否则 0 - yAxisData.length-1
        },
        series: [
          {
            realtimeSort: true,
            type: 'bar',
            data: seriesData,
            label: {
              show: true,
              position: 'right',
              valueAnimation: true
            }
          }
        ],
        legend: {
          show: true
        },
        animationDuration: 0,
        animationDurationUpdate: 3000,
        animationEasing: 'linear',
        animationEasingUpdate: 'linear'
      }
      this.myChart.setOption(options)
      setTimeout(() => {
        this.chartRun()
      }, 0);
    },
    sliderChange(value){
      this.chartIndex = this.marksList.find(o=>o.value == value).index
      this.chartRun()
    },
    chartRun(){
      if(this.chartAutoPlay){
        this.chartIndex++
        this.marksValue = new Number(this.marksList.find(e=>e.index == this.chartIndex).value).valueOf()
        // console.log(this.marksValue)
      }
      let yAxisData = this.hourArr[this.chartIndex].userNameArr
      let seriesData = this.hourArr[this.chartIndex].seriesData
      // console.log(this.chartIndex,seriesData,yAxisData)
      this.myChart.setOption({
        xAxis: {
          max: 'dataMax'
        },
        yAxis: {
          type: 'category',
          data: yAxisData,
          inverse: true,
          animationDuration: 300,
          animationDurationUpdate: 300,
          max: 4, //y轴数据大于10个时展示10个（0-9),否则 0 - yAxisData.length-1
        },
        series: [
          {
            realtimeSort: true,
            type: 'bar',
            data: seriesData,
            label: {
              show: true,
              position: 'right',
              valueAnimation: true
            }
          }
        ],
        legend: {
          show: true
        },
        animationDuration: 0,
        animationDurationUpdate: this.chartAutoPlayTimeOut,
        animationEasing: 'linear',
        animationEasingUpdate: 'linear'
      })
      if(this.chartIndex < this.hourArr.length - 1&&this.chartAutoPlay){
        this.chartTimeoutFunc = setTimeout(() => {
          this.chartRun()
        }, this.chartAutoPlayTimeOut + 300);
      }
    },
    refresh(){
      this.spin = true
      this.createChart()
      setTimeout(() => {
        this.spin = false
      }, 800);
    },

    getSorter2(sorter){
      if(sorter.column){
        this.changeKey2 = sorter.column.dataIndex
        switch(sorter.order){
          case "ascend":
            this.changeOrder2 = 'ASC'
            break
          case "descend":
            this.changeOrder2 = 'DESC'
            break
        }
      }else{
        this.changeKey2 = ''
        this.changeOrder2 = ''
      }
    },
    onClear2() {
      this.$message.info('您清空了勾选的所有行')
    },
    onChange2(pagination, filters, sorter,) {
      // console.log(pagination, filters, sorter)
      if(this.page2 == pagination.current){
        this.getSorter2(sorter)
        this.getXiaoshiData()
      }
      this.page2 = pagination.current
    },
    onExpand2(bool, row){
      if(bool){
        this.expandedRowKeys2.push(row.id)
      }else{
        let idx = this.expandedRowKeys2.findIndex(e=>e == row.id)
        this.expandedRowKeys2.splice(idx,1)
      }
    },
    onSearch(userName){
      this.keyWord = userName
      if(userName != ''){
        this.dataSource2 = this.dataSource2Total.filter(o=>o.userName == userName)
      }else{
        this.dataSource2 = this.dataSource2Total
      }
    },

    getSorter(sorter){
      if(sorter.column){
        this.changeKey = sorter.column.dataIndex
        switch(sorter.order){
          case "ascend":
            this.changeOrder = 'ASC'
            break
          case "descend":
            this.changeOrder = 'DESC'
            break
        }
      }else{
        this.changeKey = ''
        this.changeOrder = ''
      }
    },
    onClear() {
      this.$message.info('您清空了勾选的所有行')
    },
    onChange(pagination, filters, sorter,) {
      // console.log(pagination, filters, sorter)
      if(this.page == pagination.current){
        this.getSorter(sorter)
        this.getRiData()
      }
      this.page = pagination.current
    },
    onExpand(bool, row){
      if(bool){
        this.expandedRowKeys.push(row.id)
      }else{
        let idx = this.expandedRowKeys.findIndex(e=>e == row.id)
        this.expandedRowKeys.splice(idx,1)
      }
      console.log("onExpand", bool, row,this.expandedRowKeys)
    },
    tabsChange(){
      this.init()
    },
    selectYouhuashi(e){
      this.youhuashiId = e
      this.init()
    },
    getHuanbi(item,key){
      let today = item[key]?item[key]:0
      let yesdata = item.yesdata?item.yesdata[key]?item.yesdata[key]:0:0
      let huanbi = '-'
      if(yesdata != 0 && today != 0){
        huanbi = (today - yesdata)/yesdata*100
        huanbi = huanbi.toFixed(2)
      }else if(yesdata == 0 && today == 0){
        huanbi = 0
      }
      return huanbi
    },
    selectChange(){
      this.getTotalData()
    },
    formDateChange(e){
      if(e.length == 0){return}
      this.form.start_date = e[0].format("YYYY-MM-DD")
      this.form.end_date = e[1].format("YYYY-MM-DD")
      this.getTotalData()
    },
    disabledDate(current){
      return current && ( current < moment().endOf('day').add(-31, 'days') || current > moment().endOf('day').add(-1, 'days')) ;
    },
  },
  watch:{
    chartAutoPlay(val){
      if(val){
        this.chartRun()
      }
    }
  },
  computed:{
    isoptimizer(){
      console.log(this.$store.state.user.userInfo.isoptimizer)
      return this.$store.state.user.userInfo.isoptimizer
    }
  },
  components:{
    StandardTable,
    chartLine,
    countTo,
  }
}
</script>

<style lang="less" scoped>
.container{
  .card{
    margin-bottom: 20px;
  }
  .area{
    display: flex;
    align-items: center;
  }
  .fontGreen{
    margin-left: 10px;
    color: #41b883;
  }
  .fontRed{
    margin-left: 10px;
    color: #c96168;
  }
}
.card-container {
  overflow: hidden;
}
.card-container > .ant-tabs-card > .ant-tabs-content {
  height: 120px;
  margin-top: -16px;
}

.card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
  background: #fff;
  padding: 16px;
}

.card-container > .ant-tabs-card > .ant-tabs-bar {
  border-color: #fff;
}

.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
  border-color: transparent;
  background: transparent;
}

.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
  border-color: #fff;
  background: #fff;
}

.totalContainer{
  background-color: #f0f2f5;
}
.total-col{
  background-color: #fff;
  border-radius: 8px;
  padding: 10px 20px;
  margin-top: 20px;
}
.total-item{
  display: flex;
  flex-direction: column;
  .title{
    // font-weight: 700;
    // font-size: 22px;
    // color: #545b66;
    color: rgba(0,0,0,.45);
    font-size: 14px;
    line-height: 22px;
    white-space: nowrap;
  }
  .p{
    color: #222222;
    font-size: 22px;
    margin-top: 20px;
  }
}
</style>